<template>
	<view class="content">
		<UniNavBar />
		<view class="box">
			<view class="t1 tac">绑定一种亲密关系</view>
			<view class="t2 tac">你们将登记成为唯一情侣/闺蜜关系</view>
			<view class="dis-flex flex-x-around relation">
				<view class="container flex-y-center">
					<image class="imgwrap" src="/static/imgs/tou.png" mode="widthFix"></image>
					<view class="tac">情侣</view>
					<u-button type="primary" text="邀请Ta" @click="invite(1)"></u-button>
				</view>

				<view class="container flex-y-center">
					<image class="imgwrap" src="/static/imgs/tou.png" mode="widthFix"></image>
					<view class="tac">闺蜜</view>
					<u-button type="primary" text="邀请Ta" @click="invite(2)"></u-button>
				</view>
			</view>
			<view class="desc">
				这里是说明说明你们将登记成为唯一情侣/闺蜜关系你们将登记成为唯一情侣/闺蜜关系你们将登记成为唯一情侣/闺蜜关系你们将登记成为唯一情侣/闺蜜关系你们将登记成为唯一情侣/闺蜜关系你们将登记成为唯一情侣/闺蜜关系你们将登记成为唯一情侣/闺蜜关系你们将登记成为唯一情侣/闺蜜关系你们将登记成为唯一情侣/闺蜜关系
			</view>
		</view>
		<!-- <u-picker :show="show" :columns="columns" @confirm="confirm()" @cancel="close()" :closeOnClickOverlay="true"
			@close="close()" keyName="id"></u-picker> -->
	</view>
</template>

<script>
	import {
		myFriend,delFriend
	} from "../../api/my.js";
	import UniNavBar from "@/components/uniNavbar/index.vue"
	import {
		show
	} from "../../utlis/showtoast";
	export default {
		name: 'binding', // 绑定关系
		components: {
			UniNavBar
		},
		data() {
			return {
				show: false,
				list:[],
			}
		},
		onLoad(options) {

		},
		mounted(){
			this.firend()
		},
		methods: {
			invite(value) {
				console.log(value);
				if (value == 1) {
					this.ql()
				} else {
					this.gm()
				}	
			},
			ql() {
				this.show = true
				uni.navigateTo({
					url:"/pages/my/fans?&message_type=love&type=0"
				})
				console.log('情侣');
			},
			gm() {
				uni.navigateTo({
					url:"/pages/my/fans?&message_type=bestie&type=0"
				})
				console.log('闺蜜');
			},
			//确认
			confirm() {

			},
			//关闭
			close() {
				this.show = false
			},
			async firend() {
				const res = await myFriend().then(res => {
					console.log(res, '获取我的好友');
					this.list = res.data.list
					console.log(this.list);
				});
			
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.box {
			.t1 {
				font-weight: 800;
				font-size: 34rpx;
				color: $uni-text-color;
			}

			.t2 {
				font-weight: 500;
				font-size: 26rpx;
				color: $uni-text-color-placeholder;
				margin-top: 20rpx;
			}

			.relation {
				margin: 96rpx 0 32rpx;

				.imgwrap {
					width: 130rpx;
				}

				.tac {
					font-weight: 500;
					font-size: 26rpx;
					color: $uni-text-color;
					margin: 12rpx 0;
				}

				/deep/ .u-button--primary {
					width: 182rpx;
					height: 60rpx;
					border-radius: 30rpx;
				}
			}

			.desc {
				width: 640rpx;
				background: #F6F6F6;
				margin: 30rpx auto 0;
				padding: 50rpx;
				font-size: 26rpx;
				color: $uni-text-color-placeholder;
				line-height: 48rpx;
				border-radius: 50rpx;
			}

		}
	}
</style>